const css_list = [
    {
        "type": "css",
        "href": "/pages/css/reset_css.html",
        "id": "reset_css",
        "title": "css样式重置",
        "content": `
		a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
			margin:0;
			padding:0;
			-webkit-box-sizing:border-box;
			box-sizing:border-box;
		}
		a {
			text-decoration:none;
			color:inherit;
		}
		ol,nav,ul {
			list-style:none;
		}
		h1,h2,h3,h4,h5,h6 {
			font-size:100%;
			font-weight:400;
		}
		article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
			display:block;
		}
		audio,canvas,progress,video {
			display:inline-block;
			vertical-align:baseline;
		}
		audio:not([controls]) {
			display:none;
			height:0;
		}
		[hidden],template {
			display:none;
		}
		a {
			background-color:transparent;
		}
		a:active,a:hover {
			outline:0;
		}
		abbr[title] {
			border-bottom:1px dotted;
		}
		b,strong {
			font-weight:700;
		}
		dfn {
			font-style:italic;
		}
		mark {
			background:#ff0;
			color:#000;
		}
		small {
			font-size:80%;
		}
		sub,sup {
			font-size:75%;
			line-height:0;
			position:relative;
			vertical-align:baseline;
		}
		sup {
			top:-0.5em;
		}
		sub {
			bottom:-0.25em;
		}
		img {
			border:0;
		}
		svg:not(:root) {
			overflow:hidden;
		}
		figure {
			margin:1em 40px;
		}
		hr {
			-webkit-box-sizing:content-box;
			box-sizing:content-box;
			height:0;
		}
		pre {
			overflow:auto;
		}
		code,kbd,pre,samp {
			font-family:monospace,monospace;
			font-size:1em;
		}
		button,input,optgroup,select,textarea {
			color:inherit;
			margin:0;
			outline:none;
		}
		button {
			overflow:visible;
		}
		button,select {
			text-transform:none;
		}
		button,input {
			border:none;
			background:none;
		}
		button,html input[type="button"],input[type="reset"],input[type="submit"] {
			-webkit-appearance:button;
			cursor:pointer;
		}
		button[disabled],html input[disabled] {
			cursor:default;
		}
		button::-moz-focus-inner,input::-moz-focus-inner {
			border:0;
			padding:0;
		}
		input {
			line-height:normal;
		}
		input[type="checkbox"],input[type="radio"] {
			-webkit-box-sizing:border-box;
			box-sizing:border-box;
			padding:0;
		}
		input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
			height:auto;
		}
		input[type="search"] {
			-webkit-appearance:textfield;
			-webkit-box-sizing:content-box;
			box-sizing:content-box;
		}
		input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
			-webkit-appearance:none;
		}
		fieldset {
			border:1px solid silver;
			margin:0 2px;
			padding:0.35em 0.625em 0.75em;
		}
		legend {
			border:0;
			padding:0;
		}
		textarea {
			overflow:auto;
		}
		optgroup {
			font-weight:700;
		}
		table {
			border-collapse:collapse;
			border-spacing:0;
		}
		td,th {
			padding:0;
		}
		em,i {
			font-style:normal;
		}
		figure {
			margin:0;
		}

		@font-face {
			font-family:'PingFang SC';
			src:url("../fonts/PingFangSCRegular.eot");
			src:url("../fonts/PingFangSCRegular.eot?#iefix") format("embedded-opentype"),url("../fonts/PingFangSCRegular.woff2") format("woff2"),url("../fonts/PingFangSCRegular.woff") format("woff"),url("../fonts/PingFangSCRegular.ttf") format("truetype"),url("../fonts/PingFangSCRegular.svg#PingFangSCRegular") format("svg");
			font-weight:normal;
			font-style:normal;
			font-display:swap;
		}
		body,html {
			width:100%;
			height:100%;
			background:#fff;
			line-height:1.4;
			font-family:'PingFang SC',PingFang SC,Microsoft YaHei UI,Helvetica Neue,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif,Helvetica,Microsoft Yahei,Arial;
			-webkit-tap-highlight-color:transparent;
		}
        `
    },
    {
        "type": "css",
        "href": "/pages/css/boostrap_grid.html",
        "id": "boostrap_grid",
        "title": "bootstrap栅格布局",
        "content": `
        .col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12 {
            position:relative;
            min-height:1px;
            padding-right:15px;
            padding-left:15px;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
        }
        .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
            float:left;
        }
        .col-xs-12 {
            width:100%;
        }
        .col-xs-11 {
            width:91.66666667%;
        }
        .col-xs-10 {
            width:83.33333333%;
        }
        .col-xs-9 {
            width:75%;
        }
        .col-xs-8 {
            width:66.66666667%;
        }
        .col-xs-7 {
            width:58.33333333%;
        }
        .col-xs-6 {
            width:50%;
        }
        .col-xs-5 {
            width:41.66666667%;
        }
        .col-xs-4 {
            width:33.33333333%;
        }
        .col-xs-3 {
            width:25%;
        }
        .col-xs-2 {
            width:16.66666667%;
        }
        .col-xs-1 {
            width:8.33333333%;
        }
        .col-xs-pull-12 {
            right:100%;
        }
        .col-xs-pull-11 {
            right:91.66666667%;
        }
        .col-xs-pull-10 {
            right:83.33333333%;
        }
        .col-xs-pull-9 {
            right:75%;
        }
        .col-xs-pull-8 {
            right:66.66666667%;
        }
        .col-xs-pull-7 {
            right:58.33333333%;
        }
        .col-xs-pull-6 {
            right:50%;
        }
        .col-xs-pull-5 {
            right:41.66666667%;
        }
        .col-xs-pull-4 {
            right:33.33333333%;
        }
        .col-xs-pull-3 {
            right:25%;
        }
        .col-xs-pull-2 {
            right:16.66666667%;
        }
        .col-xs-pull-1 {
            right:8.33333333%;
        }
        .col-xs-pull-0 {
            right:auto;
        }
        .col-xs-push-12 {
            left:100%;
        }
        .col-xs-push-11 {
            left:91.66666667%;
        }
        .col-xs-push-10 {
            left:83.33333333%;
        }
        .col-xs-push-9 {
            left:75%;
        }
        .col-xs-push-8 {
            left:66.66666667%;
        }
        .col-xs-push-7 {
            left:58.33333333%;
        }
        .col-xs-push-6 {
            left:50%;
        }
        .col-xs-push-5 {
            left:41.66666667%;
        }
        .col-xs-push-4 {
            left:33.33333333%;
        }
        .col-xs-push-3 {
            left:25%;
        }
        .col-xs-push-2 {
            left:16.66666667%;
        }
        .col-xs-push-1 {
            left:8.33333333%;
        }
        .col-xs-push-0 {
            left:auto;
        }
        .col-xs-offset-12 {
            margin-left:100%;
        }
        .col-xs-offset-11 {
            margin-left:91.66666667%;
        }
        .col-xs-offset-10 {
            margin-left:83.33333333%;
        }
        .col-xs-offset-9 {
            margin-left:75%;
        }
        .col-xs-offset-8 {
            margin-left:66.66666667%;
        }
        .col-xs-offset-7 {
            margin-left:58.33333333%;
        }
        .col-xs-offset-6 {
            margin-left:50%;
        }
        .col-xs-offset-5 {
            margin-left:41.66666667%;
        }
        .col-xs-offset-4 {
            margin-left:33.33333333%;
        }
        .col-xs-offset-3 {
            margin-left:25%;
        }
        .col-xs-offset-2 {
            margin-left:16.66666667%;
        }
        .col-xs-offset-1 {
            margin-left:8.33333333%;
        }
        .col-xs-offset-0 {
            margin-left:0;
        }
        @media (min-width:768px) {
            .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {
            float:left;
        }
        .col-sm-12 {
            width:100%;
        }
        .col-sm-11 {
            width:91.66666667%;
        }
        .col-sm-10 {
            width:83.33333333%;
        }
        .col-sm-9 {
            width:75%;
        }
        .col-sm-8 {
            width:66.66666667%;
        }
        .col-sm-7 {
            width:58.33333333%;
        }
        .col-sm-6 {
            width:50%;
        }
        .col-sm-5 {
            width:41.66666667%;
        }
        .col-sm-4 {
            width:33.33333333%;
        }
        .col-sm-3 {
            width:25%;
        }
        .col-sm-2 {
            width:16.66666667%;
        }
        .col-sm-1 {
            width:8.33333333%;
        }
        .col-sm-pull-12 {
            right:100%;
        }
        .col-sm-pull-11 {
            right:91.66666667%;
        }
        .col-sm-pull-10 {
            right:83.33333333%;
        }
        .col-sm-pull-9 {
            right:75%;
        }
        .col-sm-pull-8 {
            right:66.66666667%;
        }
        .col-sm-pull-7 {
            right:58.33333333%;
        }
        .col-sm-pull-6 {
            right:50%;
        }
        .col-sm-pull-5 {
            right:41.66666667%;
        }
        .col-sm-pull-4 {
            right:33.33333333%;
        }
        .col-sm-pull-3 {
            right:25%;
        }
        .col-sm-pull-2 {
            right:16.66666667%;
        }
        .col-sm-pull-1 {
            right:8.33333333%;
        }
        .col-sm-pull-0 {
            right:auto;
        }
        .col-sm-push-12 {
            left:100%;
        }
        .col-sm-push-11 {
            left:91.66666667%;
        }
        .col-sm-push-10 {
            left:83.33333333%;
        }
        .col-sm-push-9 {
            left:75%;
        }
        .col-sm-push-8 {
            left:66.66666667%;
        }
        .col-sm-push-7 {
            left:58.33333333%;
        }
        .col-sm-push-6 {
            left:50%;
        }
        .col-sm-push-5 {
            left:41.66666667%;
        }
        .col-sm-push-4 {
            left:33.33333333%;
        }
        .col-sm-push-3 {
            left:25%;
        }
        .col-sm-push-2 {
            left:16.66666667%;
        }
        .col-sm-push-1 {
            left:8.33333333%;
        }
        .col-sm-push-0 {
            left:auto;
        }
        .col-sm-offset-12 {
            margin-left:100%;
        }
        .col-sm-offset-11 {
            margin-left:91.66666667%;
        }
        .col-sm-offset-10 {
            margin-left:83.33333333%;
        }
        .col-sm-offset-9 {
            margin-left:75%;
        }
        .col-sm-offset-8 {
            margin-left:66.66666667%;
        }
        .col-sm-offset-7 {
            margin-left:58.33333333%;
        }
        .col-sm-offset-6 {
            margin-left:50%;
        }
        .col-sm-offset-5 {
            margin-left:41.66666667%;
        }
        .col-sm-offset-4 {
            margin-left:33.33333333%;
        }
        .col-sm-offset-3 {
            margin-left:25%;
        }
        .col-sm-offset-2 {
            margin-left:16.66666667%;
        }
        .col-sm-offset-1 {
            margin-left:8.33333333%;
        }
        .col-sm-offset-0 {
            margin-left:0;
        }
        }@media (min-width:992px) {
            .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
            float:left;
        }
        .col-md-12 {
            width:100%;
        }
        .col-md-11 {
            width:91.66666667%;
        }
        .col-md-10 {
            width:83.33333333%;
        }
        .col-md-9 {
            width:75%;
        }
        .col-md-8 {
            width:66.66666667%;
        }
        .col-md-7 {
            width:58.33333333%;
        }
        .col-md-6 {
            width:50%;
        }
        .col-md-5 {
            width:41.66666667%;
        }
        .col-md-4 {
            width:33.33333333%;
        }
        .col-md-3 {
            width:25%;
        }
        .col-md-2 {
            width:16.66666667%;
        }
        .col-md-1 {
            width:8.33333333%;
        }
        .col-md-pull-12 {
            right:100%;
        }
        .col-md-pull-11 {
            right:91.66666667%;
        }
        .col-md-pull-10 {
            right:83.33333333%;
        }
        .col-md-pull-9 {
            right:75%;
        }
        .col-md-pull-8 {
            right:66.66666667%;
        }
        .col-md-pull-7 {
            right:58.33333333%;
        }
        .col-md-pull-6 {
            right:50%;
        }
        .col-md-pull-5 {
            right:41.66666667%;
        }
        .col-md-pull-4 {
            right:33.33333333%;
        }
        .col-md-pull-3 {
            right:25%;
        }
        .col-md-pull-2 {
            right:16.66666667%;
        }
        .col-md-pull-1 {
            right:8.33333333%;
        }
        .col-md-pull-0 {
            right:auto;
        }
        .col-md-push-12 {
            left:100%;
        }
        .col-md-push-11 {
            left:91.66666667%;
        }
        .col-md-push-10 {
            left:83.33333333%;
        }
        .col-md-push-9 {
            left:75%;
        }
        .col-md-push-8 {
            left:66.66666667%;
        }
        .col-md-push-7 {
            left:58.33333333%;
        }
        .col-md-push-6 {
            left:50%;
        }
        .col-md-push-5 {
            left:41.66666667%;
        }
        .col-md-push-4 {
            left:33.33333333%;
        }
        .col-md-push-3 {
            left:25%;
        }
        .col-md-push-2 {
            left:16.66666667%;
        }
        .col-md-push-1 {
            left:8.33333333%;
        }
        .col-md-push-0 {
            left:auto;
        }
        .col-md-offset-12 {
            margin-left:100%;
        }
        .col-md-offset-11 {
            margin-left:91.66666667%;
        }
        .col-md-offset-10 {
            margin-left:83.33333333%;
        }
        .col-md-offset-9 {
            margin-left:75%;
        }
        .col-md-offset-8 {
            margin-left:66.66666667%;
        }
        .col-md-offset-7 {
            margin-left:58.33333333%;
        }
        .col-md-offset-6 {
            margin-left:50%;
        }
        .col-md-offset-5 {
            margin-left:41.66666667%;
        }
        .col-md-offset-4 {
            margin-left:33.33333333%;
        }
        .col-md-offset-3 {
            margin-left:25%;
        }
        .col-md-offset-2 {
            margin-left:16.66666667%;
        }
        .col-md-offset-1 {
            margin-left:8.33333333%;
        }
        .col-md-offset-0 {
            margin-left:0;
        }
        }@media (min-width:1200px) {
            .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 {
            float:left;
        }
        .col-lg-12 {
            width:100%;
        }
        .col-lg-11 {
            width:91.66666667%;
        }
        .col-lg-10 {
            width:83.33333333%;
        }
        .col-lg-9 {
            width:75%;
        }
        .col-lg-8 {
            width:66.66666667%;
        }
        .col-lg-7 {
            width:58.33333333%;
        }
        .col-lg-6 {
            width:50%;
        }
        .col-lg-5 {
            width:41.66666667%;
        }
        .col-lg-4 {
            width:33.33333333%;
        }
        .col-lg-3 {
            width:25%;
        }
        .col-lg-2 {
            width:16.66666667%;
        }
        .col-lg-1 {
            width:8.33333333%;
        }
        .col-lg-pull-12 {
            right:100%;
        }
        .col-lg-pull-11 {
            right:91.66666667%;
        }
        .col-lg-pull-10 {
            right:83.33333333%;
        }
        .col-lg-pull-9 {
            right:75%;
        }
        .col-lg-pull-8 {
            right:66.66666667%;
        }
        .col-lg-pull-7 {
            right:58.33333333%;
        }
        .col-lg-pull-6 {
            right:50%;
        }
        .col-lg-pull-5 {
            right:41.66666667%;
        }
        .col-lg-pull-4 {
            right:33.33333333%;
        }
        .col-lg-pull-3 {
            right:25%;
        }
        .col-lg-pull-2 {
            right:16.66666667%;
        }
        .col-lg-pull-1 {
            right:8.33333333%;
        }
        .col-lg-pull-0 {
            right:auto;
        }
        .col-lg-push-12 {
            left:100%;
        }
        .col-lg-push-11 {
            left:91.66666667%;
        }
        .col-lg-push-10 {
            left:83.33333333%;
        }
        .col-lg-push-9 {
            left:75%;
        }
        .col-lg-push-8 {
            left:66.66666667%;
        }
        .col-lg-push-7 {
            left:58.33333333%;
        }
        .col-lg-push-6 {
            left:50%;
        }
        .col-lg-push-5 {
            left:41.66666667%;
        }
        .col-lg-push-4 {
            left:33.33333333%;
        }
        .col-lg-push-3 {
            left:25%;
        }
        .col-lg-push-2 {
            left:16.66666667%;
        }
        .col-lg-push-1 {
            left:8.33333333%;
        }
        .col-lg-push-0 {
            left:auto;
        }
        .col-lg-offset-12 {
            margin-left:100%;
        }
        .col-lg-offset-11 {
            margin-left:91.66666667%;
        }
        .col-lg-offset-10 {
            margin-left:83.33333333%;
        }
        .col-lg-offset-9 {
            margin-left:75%;
        }
        .col-lg-offset-8 {
            margin-left:66.66666667%;
        }
        .col-lg-offset-7 {
            margin-left:58.33333333%;
        }
        .col-lg-offset-6 {
            margin-left:50%;
        }
        .col-lg-offset-5 {
            margin-left:41.66666667%;
        }
        .col-lg-offset-4 {
            margin-left:33.33333333%;
        }
        .col-lg-offset-3 {
            margin-left:25%;
        }
        .col-lg-offset-2 {
            margin-left:16.66666667%;
        }
        .col-lg-offset-1 {
            margin-left:8.33333333%;
        }
        .col-lg-offset-0 {
            margin-left:0;
        }
        }.row {
            margin-right:-15px;
            margin-left:-15px;
        }
        .clearfix {
            *zoom:1;
        }
        .row:after,.clearfix:after {
            content:"020";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
        }
        .row:after,.clearfix:after {
            clear:both;
        }`
    },
    {
        "type": "css",
        "href": "/pages/css/flex_ellipsis.html",
        "id": "flex_ellipsis",
        "title": "flex弹性布局缩略",
        "content": ` 
        .div1 {
            display: flex;
            width: 300px;
            font-size: 14px;
        }
    
        .title {
            flex: 80px 0 0;
    
        }
    
        .content {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }`,
        "html": `
        <div class="div1">
        <div class="title">标题而已</div>
        <div class="content">内容而已内容而已内容而已内容而已内容而已内容而已内容而已内容而已内容而已</div>
        </div>
        `
    },
    {
        "type": "css",
        "href": "/pages/css/ellipsis_two_line.html",
        "id": "ellipsis_two_line",
        "title": "缩略两行显示",
        "content": `
        .div1 {
            display: flex;
            width: 300px;
            font-size: 14px;
        }
    
        .title {
            flex: 80px 0 0;
    
        }
    
        .content {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    
        .ellipsis-2 {
            display: -webkit-box;
            overflow: hidden;
            white-space: normal !important;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        `,
        "html": `
        <div class="div1">
        <div class="title">标题而已</div>
        <div class="content">
            <div style="width:200px" class="ellipsis-2">
                <div class="">
                    内容而已内容而已内容而已内容而已内容而已内容而已内容而已内容而已内容而已
                </div>
            </div>
        </div>
    </div>
        `
    },
    {
        "type": "css",
        "href": "/pages/css/flex_style.html",
        "id": "flex_style",
        "title": "flex通用布局",
        "content": `
        .flex{
			display:flex;
		}
		.flex-center{
			align-items: center;
			justify-content: center;
		}
		.flex-sub {
			flex: 1;
		}
		.align-start {
			align-items: flex-start;
		}

		.align-end {
			align-items: flex-end;
		}

		.align-center {
			align-items: center;
		}
		.justify-start {
			justify-content: flex-start;
		}

		.justify-end {
			justify-content: flex-end;
		}

		.justify-center {
			justify-content: center;
		}

		.justify-between {
			justify-content: space-between;
		}

		.justify-around {
			justify-content: space-around;
		}
        `
    }
]

export default css_list